<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
  <title>数据统计</title>
  <meta name="keywords" content=" " />
  <meta name="description" content="" />
  <link rel="stylesheet" href="https://zc.alltesting.cn/css/reset.css">
  <link rel="stylesheet" href="./css/common-style.css">
  <link rel="stylesheet" href="./css/statistics.css">
  <!-- 1. 引入vue，需要引用在 ElementUI 之前-->
  <script src="./js/vue.js"></script>
  <!-- 2. 导入css -->
  <link href="./element-ui@2.15.8/lib/theme-chalk/index.css" rel="stylesheet">
  <!-- 3. 引入ElementUI组件 -->
  <script src="./element-ui@2.15.8/lib/index.js"></script>

</head>

<body>
  <!-- header 占位符 -->
  <div style="height: 70px;width:100%">
    <header style="position: fixed;top:0;left:0;right:0;background-color:#212832;height: 70px;z-index: 100;"></header>
  </div>
  <div id="statistics" v-cloak>
    <!-- 工具栏 -->
    <div class="statistics-tool-bar-placeholder"></div>
    <div class="statistics-tool-bar">
      <div class="ASQ-container">
        <div class="statistics-tool-bar-content">
          <el-select v-model="value" filterable placeholder="请选择">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <ul class="statistics-data-switch">
            <li v-for="(item,index) in ['数据统计','详细答卷']" @click="handleTypeSwitchClick(index)"
              :class="{active:index == currentTabIndex}">
              <img src="./images/statistics/tool-01-white.png" v-if="index==0 && index == currentTabIndex">
              <img src="./images/statistics/tool-01-black.png" v-if="index==0 && index != currentTabIndex">
              <img src="./images/statistics/tool-02-white.png" v-if="index==1 && index == currentTabIndex">
              <img src="./images/statistics/tool-02-black.png" v-if="index==1 && index != currentTabIndex">
              {{item}}
            </li>
          </ul>
          <el-link :underline="false">预览问卷</el-link>
        </div>
      </div>
    </div>

    <!-- 数据统计栏 -->
    <div class="statistics-data-bar-placeholder"></div>
    <div class="statistics-data-bar">
      <div class="statistics-data-bar-item">
        <h3>{{questionnaireStatisticsData.dailyIncrease}}</h3>
        <p>今日新增数据</p>
      </div>
      <div class="statistics-data-bar-item">
        <h3>{{questionnaireStatisticsData.applySum}}</h3>
        <p>数据总量</p>
      </div>
      <div class="statistics-data-bar-item">
        <h3>{{questionnaireStatisticsData.averageTime}}</h3>
        <p>平均答题时间</p>
      </div>
    </div>

    <!-- 统计数据列表 -->
    <div class="ASQ-container">
      <div class="questionnair-statistics-data-list">
        <div class="data-statistics-area" v-for="(item,index) in questionnaireStatisticsData.questionData"
          v-show="currentTabIndex===0">
          <div class="question-table-item" v-if="item.type=='sc'">
            <h3>{{index+1}}、{{item.title}}<span>【单选题】</span></h3>
            <el-table :data="item.choice" border style="width: 100%"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">
              <el-table-column prop="title" label="选项">
              </el-table-column>
              <el-table-column prop="answerNum" label="回复情况" sortable>
                <template slot-scope="scope">
                  <!-- <el-progress type="line" :percentage="hasDot(scope.row.answerNum,200)" color="#2C8AFF" :stroke-width="10" /> -->
                  <el-progress type="line"
                    :percentage="Math.round(100*scope.row.answerNum/questionnaireStatisticsData.applySum)"
                    color="#2C8AFF" :stroke-width="10" />
                </template>
              </el-table-column>
              <el-table-column prop="answerNum" label="小计" sortable>
              </el-table-column>
            </el-table>
            <div class="answer-people-num">本题有效填写总人次：{{questionnaireStatisticsData.applySum}}</div>
          </div>

          <div class="question-table-item" v-if="item.type=='mc'">
            <h3>{{index+1}}、{{item.title}}<span>【多选题】</span></h3>
            <el-table :data="item.choice" border style="width: 100%"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">
              <el-table-column prop="title" label="选项">
              </el-table-column>
              <el-table-column prop="answerNum" label="回复情况" sortable>
                <template slot-scope="scope">
                  <!-- <el-progress type="line" :percentage="hasDot(scope.row.answerNum,200)" color="#2C8AFF" :stroke-width="10" /> -->
                  <el-progress type="line"
                    :percentage="Math.round(100*scope.row.answerNum/questionnaireStatisticsData.applySum)"
                    color="#2C8AFF" :stroke-width="10" />
                </template>
              </el-table-column>
              <el-table-column prop="answerNum" label="小计" sortable>
              </el-table-column>
            </el-table>
            <div class="answer-people-num">本题有效填写总人次：{{questionnaireStatisticsData.applySum}}</div>
          </div>

          <div class="question-table-item image-upload-item" v-if="item.type=='iu'">
            <h3>{{index+1}}、{{item.title}}</h3>
            <el-table :data="item.choice" border style="width: 100%"
              :header-cell-style="{background:'#eef1f6',color:'#606266'}">
              <el-table-column prop="title" label="选项">
                <template slot-scope="scope">
                  <el-image style="width:30px;height:30px;vertical-align:middle;" :src="scope.row.imgUrl"
                    :preview-src-list="scope.row.srcList"></el-image>
                  <span style="margin-left: 10px;">{{scope.row.title}}</span>
                </template>
              </el-table-column>
              <el-table-column prop="answerNum" label="回复情况" sortable>
                <template slot-scope="scope">
                  <!-- <el-progress type="line" :percentage="hasDot(scope.row.answerNum,200)" color="#2C8AFF" :stroke-width="10" /> -->
                  <el-progress type="line"
                    :percentage="Math.round(100*scope.row.answerNum/questionnaireStatisticsData.applySum)"
                    color="#2C8AFF" :stroke-width="10" />
                </template>
              </el-table-column>
              <el-table-column prop="answerNum" label="小计" sortable>
              </el-table-column>
            </el-table>
            <div class="answer-people-num">本题有效填写总人次：{{questionnaireStatisticsData.applySum}}</div>
          </div>

          <div class="question-table-item image-upload-item" v-if="item.type=='si'">
            <h3>{{index+1}}、{{item.title}}</h3>
            <el-tabs>
              <el-tab-pane>
                <span slot="label"><i class="el-icon-chat-line-square" style="margin-right:5px"></i>回答详情</span>
                <el-table
                  :data="item.choice.slice((item.currentPage - 1) * item.pageSize, item.currentPage * item.pageSize)"
                  border style="width: 100%" :header-cell-style="{background:'#eef1f6',color:'#606266'}">
                  <el-table-column type="index" label="序号" width="60" align="center">
                    <template slot-scope="scope">
                      <span>{{(scope.$index + 1) + (item.currentPage - 1) * item.pageSize}}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="inputValue" label="回答详情"></el-table-column>
                  <el-table-column label="答卷详情" width="80" align="center">
                    <template slot-scope="scope">
                      <el-button @click="handleClick(scope.row)" type="text" size="middle">查看</el-button>
                    </template>
                  </el-table-column>
                </el-table>
                <div class="TPageControl">
                  <span>本题有效填写总人次：{{questionnaireStatisticsData.applySum}}</span>
                  <el-pagination @size-change="handleSizeChange($event,item.pageSize)"
                    @current-change="handleCurrentChange($event,item.currentPage)" :current-page.sync="item.currentPage"
                    :page-sizes.sync="item.pageSizes" :page-size.sync="item.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="item.choice.length">
                  </el-pagination>
                </div>
              </el-tab-pane>
            </el-tabs>
          </div>
        </div>
        <div class="detail-information-area" v-show="currentTabIndex===1">
          <el-table 
            :data="questionnaireStatisticsData.userInfoDetail.userInfoList.slice((questionnaireStatisticsData.userInfoDetail.currentPage - 1) * questionnaireStatisticsData.userInfoDetail.pageSize, questionnaireStatisticsData.userInfoDetail.currentPage * questionnaireStatisticsData.userInfoDetail.pageSize)"
            border
            style="width: 100%"
            :header-cell-style="{background:'#eef1f6',color:'#606266'}">
            <el-table-column type="index" label="序号" width="50" align="center">
              <template slot-scope="scope">
                <span>{{(scope.$index + 1) + (questionnaireStatisticsData.userInfoDetail.currentPage - 1) * questionnaireStatisticsData.userInfoDetail.pageSize}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="startTime" label="开始时间" width="180"></el-table-column>
            <el-table-column prop="submitTime" label="提交时间" width="180"></el-table-column>
            <el-table-column prop="duration" label="答题时长"></el-table-column>
            <el-table-column prop="IPProvince" label="IP省份"></el-table-column>
            <el-table-column prop="IPAdress" label="IP地址"></el-table-column>
            <el-table-column prop="browser" label="浏览器"></el-table-column>
            <el-table-column prop="OS" label="操作系统"></el-table-column>
            <el-table-column label="操作" width="120" align="center">
              <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="middle">查看</el-button>
                <el-button @click="handleDeleClick(scope.$index)" type="text" size="middle">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination 
                    @size-change="handleSizeChange($event,questionnaireStatisticsData.userInfoDetail.pageSize)"
                    @current-change="handleCurrentChange($event,questionnaireStatisticsData.userInfoDetail.currentPage)" 
                    :current-page.sync="questionnaireStatisticsData.userInfoDetail.currentPage"
                    :page-sizes.sync="questionnaireStatisticsData.userInfoDetail.pageSizes" 
                    :page-size.sync="questionnaireStatisticsData.userInfoDetail.pageSize"
                    layout="total, sizes, prev, pager, next, jumper" 
                    :total="questionnaireStatisticsData.userInfoDetail.userInfoList.length"
                    class="page-component">
          </el-pagination>

        </div>
      </div>
    </div>
  </div>
</body>
<script src="./echart/echart3.js"></script>
<script src="./echart/echarts-wordcloud.js"></script>
<script>
  var Main = {
    data() {
      return {
        summmy: 300,
        num: -1,
        currentTabIndex: 1,
        radio: "",
        checked1: "",
        questionnaireStatisticsData: {
          id: "1231232131uonfwdhfjwkhfw",
          title: "问卷标题",
          applySum: 120,
          dailyIncrease: 5,
          averageTime: "3分30秒",
          questionData: [
            {
              id: '21213bfkjshfk',
              title: "单选题单选题单选题单选题单选题单选题单选题单选题",
              type: 'sc',
              choice: [
                {
                  title: "单选题选项1",
                  answerNum: 10,
                },
                {
                  title: "单选题选项2",
                  answerNum: 19,
                },
                {
                  title: "单选题选项3",
                  answerNum: 18,
                },
                {
                  title: "单选题选项4",
                  answerNum: 39,
                },
              ]
            },
            {
              id: '21213b324fkjshfk',
              title: "多选题多选题多选题多选题多选题多选题多选题多选题",
              type: 'mc',
              choice: [
                {
                  title: "多项选择题1",
                  answerNum: 36,
                },
                {
                  title: "多项选择题2",
                  answerNum: 52,
                },
                {
                  title: "多项选择题3",
                  answerNum: 86,
                },
                {
                  title: "多项选择题4",
                  answerNum: 56,
                },
              ]
            },
            {
              id: '21213b5t353fkjshfk',
              title: "图片投票题",
              type: 'iu',
              choice: [
                {
                  title: "图片投票1",
                  imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665045162&t=dea34ba9fe886fc9fd15eaed048775e3",
                  srcList: ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2Ftp09%2F210F2130512J47-0-lp.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665045162&t=dea34ba9fe886fc9fd15eaed048775e3'],
                  answerNum: 36,
                },
                {
                  title: "图片投票2",
                  imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F12%2F20200512095809_SJfKV.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665045162&t=9fb36967a1cb7f8054e9f7470cfdd4a2",
                  srcList: ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fitem%2F202005%2F12%2F20200512095809_SJfKV.thumb.400_0.jpeg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665045162&t=9fb36967a1cb7f8054e9f7470cfdd4a2'],
                  answerNum: 56,
                },
                {
                  title: "图片投票3",
                  imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665045162&t=2ab0ab8aacadd588ea9a9d4c8c67fcb3",
                  srcList: ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.2008php.com%2F09_Website_appreciate%2F10-07-11%2F1278861720_g.jpg&refer=http%3A%2F%2Fwww.2008php.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665045162&t=2ab0ab8aacadd588ea9a9d4c8c67fcb3'],
                  answerNum: 86,
                },
                {
                  title: "图片投票4",
                  imgUrl: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665045162&t=46187f1195bd57647779023aa9ca4b1c",
                  srcList: ['https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1113%2F052420110515%2F200524110515-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665045162&t=46187f1195bd57647779023aa9ca4b1c'],
                  answerNum: 56,
                },
              ]
            },
            {
              id: '21213b5t353fkjshfk',
              title: "单项填空题单项填空题单项填空题单项填空题单项填空题",
              type: 'si',
              pageSize: 11,
              pageSizes: [11, 22, 33, 44],
              currentPage: 1,
              choice: [
                {
                  userId: '12131231908mfj',
                  inputValue: '回答了问题001'
                },
                {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题002'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题003'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题004'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题005'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题006'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题007'
                },
                {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题008'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题009'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题010'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题011'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题012'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题013'
                },
                {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题014'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题015'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题016'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题017'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题018'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题019'
                },
                {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题020'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题021'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题022'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题023'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题024'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题025'
                }, {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题026'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题253531212'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题21212'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题2143334212'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题2124334534512'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题2124r412'
                }, {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题2434y1212'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题253531212'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题21212'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题2143334212'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题2124334534512'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题2124r412'
                }
              ]
            },
            {
              id: 'rrerre2232432423jsjdk423423',
              title: "单项填空题单项填空题单项填空题单项填空题单项填空题",
              type: 'si',
              pageSize: 5,
              pageSizes: [10, 20, 30, 40],
              currentPage: 1,
              choice: [
                {
                  userId: '12131231908mfj',
                  inputValue: '回答了问题001'
                },
                {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题002'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题003'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题004'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题005'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题006'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题007'
                },
                {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题008'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题009'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题010'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题011'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题012'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题013'
                },
                {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题014'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题015'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题016'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题017'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题018'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题019'
                },
                {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题020'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题021'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题022'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题023'
                },
                {
                  userId: '12131231953453408mfj',
                  inputValue: '回答了问题024'
                },
                {
                  userId: '121312314325363908mfj',
                  inputValue: '回答了问题025'
                }, {
                  userId: '121312312312908mfj',
                  inputValue: '回答了问题026'
                },
                {
                  userId: '12131234142311908mfj',
                  inputValue: '回答了问题253531212'
                },
                {
                  userId: '1213123165756908mfj',
                  inputValue: '回答了问题21212'
                },
                {
                  userId: '12131234353451908mfj',
                  inputValue: '回答了问题2143334212'
                }
              ]
            },
          ],
          userInfoDetail:{
            pageSize: 10,
            pageSizes: [10, 20, 30, 40],
            currentPage: 1,
            userInfoList: [
            {
              id: 'ee213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-24 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'ffee213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-25 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'ssee213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-26 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'hhee213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 't12e12e213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'eyuhe213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'yyee213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'tee213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'ree213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'e22e213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'tee213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'ree213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'e22e213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'tee213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'ree213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
            {
              id: 'e22e213123hufuyweghfiwe',
              startTime: '2022-08-22 14:12',
              submitTime: '2022-08-22 14:12',
              duration: '0分30秒',
              IPProvince: "上海",
              IPAdress: '上海市',
              browser: 'QQ浏览器',
              OS: 'win10'
            },
          ]

          },
          

        },
        options: [{
          value: 1,
          label: '问卷1'
        }, {
          value: 2,
          label: '问卷2'
        }, {
          value: 3,
          label: '问卷3'
        }, {
          value: 4,
          label: '问卷4'
        }, {
          value: 5,
          label: '问卷5'
        }],
        value: 2,
        tableData: [{
          date: '2016-05-02',
          num: 100,
          address: 100
        }, {
          date: '2016-05-04',
          num: 120,
          address: 20
        }, {
          date: '2016-05-01',
          num: 88,
          address: 15
        }, {
          date: '2016-05-03',
          num: 66,
          address: 18
        }]
      }
    },
    methods: {
      handleTypeSwitchClick(index) {
        this.currentTabIndex = index
      },
      handleSizeChange(val, pageSizeValue) {
        pageSizeValue = val
        console.log(123);
      },
      handleCurrentChange(val, currentPageValue) {
        currentPageValue = val
        console.log(456);
      },

      handleDeleClick(index){
        this.$confirm('确定要删除么?', '删除确认', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.questionnaireStatisticsData.userInfoDetail.userInfoList.splice(index,1)
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch((error) => {
          console.log(error);
        });

      }
    }
  }

  var Ctor = Vue.extend(Main)
  new Ctor().$mount('#statistics')
</script>

</html>